<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="/css/main.css" />
  <link rel="stylesheet" href="/cms/layui/css/layui.css">
    <script src="/js/uikit.js"></script>
</head>

<body>

<div th:insert="~{common::#header}"></div>
<div class="uk-section uk-section-muted">
  <div class="uk-container">
    <ul class="uk-breadcrumb uk-margin-medium-top-">
      <li><a>我的</a></li>
      <li><a>我发布的文章</a></li>
      <li><span>文章详情</span></li>
    </ul>      
    <div class="uk-background-default uk-border-rounded uk-box-shadow-small">
      <div class="uk-container uk-container-xsmall uk-padding-large">
        <form class="uk-form-stacked uk-margin-medium-top layui-form" onsubmit="return false;">
        <div class="uk-margin-bottom">
          <label class="uk-form-label" for="articleName">标题</label>
          <input type="hidden" th:value="${article.id}" id="id">
          <div class="uk-form-controls">
            <input id="articleName" class="uk-input uk-border-rounded" th:value="${article.articleName}" autocomplete="off" name="name" type="text"
                   required="">
          </div>
        </div>




          <div class="uk-margin-bottom">
            <label class="uk-form-label">摘要</label>
            <div class="uk-form-controls">
              <input id="zhaiYao" class="uk-input uk-border-rounded" th:value="${article.zhaiYao}" autocomplete="off" type="text"
                     required="">
            </div>
          </div>


        <div class="uk-margin-bottom">
          <label class="uk-form-label">文章标签</label>
          <div class="uk-form-controls">
            <span th:each="tag:${tagMap}" th:utext="${tag}"></span>

          </div>
        </div>


        <div class="uk-margin-bottom">
            <label class="uk-form-label" for="lay_edit">文章详细</label>
            <div class="uk-form-controls">
              <textarea id="lay_edit" th:utext="${article.content}" lay-verify="content" name="content"></textarea>
            </div>
          </div>

        </article>


        <div class="uk-text-center">
          <input class="uk-button uk-button-primary uk-border-rounded" type="submit" lay-submit=""
                 lay-filter="formSubmit"
                value="更新文章">
        </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div th:insert="~{common::#footer}"></div>
<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>
<script src="/cms/layui/layui.js" charset="utf-8"></script>

<script>
  layui.use(['layedit', 'form'], function () {
    var form = layui.form;
    var $ = layui.$;
    var layedit = layui.layedit;
    layedit.set({	//设置图片接口
      uploadImage: {
        url: '/file/uploads', //接口url
        type: 'post'
      }
    });

    //创建一个编辑器
    var index = layedit.build('lay_edit', {

      height: 550
    });
    //提交时把值同步到文本域中
    form.verify({
      //content富文本域中的lay-verify值
      content: function (value) {
        return layedit.sync(index);
      }
    });

    //监听提交
    form.on('submit(formSubmit)', function (data) {
      console.log(JSON.stringify(data.field).split("content")[0])
      $.ajax({
        url: '/article/add',
        type: 'POST',
        dataType: 'JSON',
        data: {
          articleName:$("#articleName").val(),
          content:$("#lay_edit").val(),
          id:$("#id").val(),
          zhaiYao:$("#zhaiYao").val(),
          tags:JSON.stringify(data.field).split("content")[0]
        },
        success: function (result) {
          if (result.code == 200) {
            layer.msg(result.msg);
            return false;
          } else {
            layer.msg(result.msg);
            return false;
          }
        }
      })

      return false;

    })
  });
</script>
</body>

</html>